<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>关于快快</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/basic.css" />
    <link rel="stylesheet" href="../assets/css/app.css" />
    <style>
        body{ background-color: #fff; }
        .am-accordion-title{ background-color: #b8b8b8 !important; color: #fff !important; padding: 0rem 1rem !important; }
        .am-accordion-content{ padding: 0 1rem; }
        .am-list-news-bd ul.am-list li{ padding-bottom: 0; }
        .am-list>li.first{ border-top: none; }
        .am-g{ background-color: #edeeee; padding: 10px 0; }
        .am-form input[type=text]{ padding: .225em .625em; border-radius: 5px; text-align: center; }
        .am-a{ padding: 0; }
        .am-a p.fr{ float: right; }
        .am-a p.am-btn-sm{ margin: 0; display: inline-block !important; margin-top: 5px; }
        .am-a p.am-btn-sm span{ color: #31cc31; }
        .am-accordion-bd li a i.r-btn{ margin-right: 5px; vertical-align: middle; }
        .am-list-news-bd ul.am-list li{ padding-top: 0; }
        .am-list .am-list-item-dated a{ padding-right: 0; }
        .am-list-news-bd ul.am-list li a{ padding: 0.75em 0; }
        .am-modal-btn{ border-right: none; }
        .am-modal-btn+.am-modal-btn{ border-left: none; }
        .am-modal-dialog{ border-radius: 5px; padding: 10px; }
        span.ok{ background-color: #31cc31; color: #fff; }
    </style>
</head>
<body>
<div class="am-g">
    <div class="am-u-sm-12">
        <form class="am-form" action="">
            <input id="car" type="text" placeholder="选择日期" />
        </form>
    </div>
</div>

<section data-am-widget="accordion" class="am-accordion">
    <dl class="am-accordion-item am-active">
        <dt class="am-accordion-title">请选择时间段</dt>
        <dd class="am-accordion-bd am-collapse am-in">
            <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
            <div class="am-accordion-content am-list-news-bd">
                <ul class="am-list">
                    <li class="am-g am-list-item-dated first">
                        <a class="am-a">
                            <i class="r-btn"></i>
                            <p class="am-btn-sm tt">9:00--10:00</p>
                            <p class="am-btn-sm fr"><span>8</span>/10</p>
                        </a>
                    </li>
                    <li class="am-g am-list-item-dated">
                        <a class="am-a">
                            <i class="r-btn"></i>
                            <p class="am-btn-sm tt">10:00--11:00</p>
                            <p class="am-btn-sm fr"><span>8</span>/10</p>
                        </a>
                    </li>
                    <li class="am-g am-list-item-dated">
                        <a class="am-a">
                            <i class="r-btn"></i>
                            <p class="am-btn-sm tt">11:00--12:00</p>
                            <p class="am-btn-sm fr"><span>8</span>/10</p>
                        </a>
                    </li>
                    <li class="am-g am-list-item-dated">
                        <a class="am-a">
                            <i class="r-btn"></i>
                            <p class="am-btn-sm tt">12:00--13:00</p>
                            <p class="am-btn-sm fr"><span>8</span>/10</p>
                        </a>
                    </li>
                    <li class="am-g am-list-item-dated">
                        <a class="am-a">
                            <i class="r-btn"></i>
                            <p class="am-btn-sm tt">13:00--14:00</p>
                            <p class="am-btn-sm fr"><span>8</span>/10</p>
                        </a>
                    </li>
                    <li class="am-g am-list-item-dated">
                        <a class="am-a">
                            <i class="r-btn"></i>
                            <p class="am-btn-sm tt">14:00--15:00</p>
                            <p class="am-btn-sm fr"><span>8</span>/10</p>
                        </a>
                    </li>
                    <li class="am-g am-list-item-dated">
                        <a class="am-a">
                            <i class="r-btn"></i>
                            <p class="am-btn-sm tt">15:00--16:00</p>
                            <p class="am-btn-sm fr"><span>8</span>/10</p>
                        </a>
                    </li>
                    <li class="am-g am-list-item-dated">
                        <a class="am-a">
                            <i class="r-btn"></i>
                            <p class="am-btn-sm tt">16:00--17:00</p>
                            <p class="am-btn-sm fr"><span>8</span>/10</p>
                        </a>
                    </li>
                    <li class="am-g am-list-item-dated">
                        <a class="am-a">
                            <i class="r-btn"></i>
                            <p class="am-btn-sm tt">17:00--18:00</p>
                            <p class="am-btn-sm fr"><span>8</span>/10</p>
                        </a>
                    </li>
                </ul>
            </div>
        </dd>
    </dl>
</section>

<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-bd am-btn-sm">您预约了 <span class="time">2015-2-28 15:00-16:00</span>的快快打蜡洗车服务</div>
        <div class="am-modal-footer">
            <span class="am-modal-btn ok" data-am-modal-confirm>确定</span>
            <span class="am-modal-btn cancel" data-am-modal-cancel>取消</span>
        </div>
    </div>
</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="../assets/js/jquery.min-1.11.1.js" type="text/javascript"></script>
<![endif]-->
<script src="../assets/js/amazeui.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.widgets.helper.min.js" type="text/javascript"></script>
<script src="../assets/js/handlebars.min.js" type="text/javascript"></script>
<script src="../assets/js/kuaikuai.js" type="text/javascript"></script>
<script>
    $(function () {
        $('li.am-g > a.am-a').on('click', function () {
            var self = $(this);
            $('li.am-g > a.am-a').find('i.rg').removeClass('rg');
            self.find('i.r-btn').addClass('rg');

            var timer = $('span.time');
            var tt = self.find('p.tt');
            var oDate = new Date();
            timer.text(oDate.getFullYear() + '-' + (oDate.getMonth() + 1) + '-' + oDate.getDate() + ' ' + tt.text());

            $('#my-confirm').modal({
                relatedTarget: this,
                onConfirm: function() {
                    alert('恭喜预约成功！');
                    addSum($('li.am-g > a.am-a').find('i.rg'));
                    //$('li.am-g > a.am-a').find('i.rg').parent().unbind('click');
                },
                onCancel: function() {
                }
            });
        });
    });

    function addSum(obj) {
        var oThis = obj.parent().find('p.fr span');
        var aTxt = parseInt(oThis.text());
        aTxt++;
        oThis.text(aTxt);
    }
</script>
</body>
</html>